<template>
  <a-modal
      :title="title"
      :width="800"
      :visible="visible"
      :confirmLoading="confirmLoading"
      @ok="handleOk"
      @cancel="handleCancel"
      ok-text="保存"
      cancel-text="取消"
      wrapClassName="ant-modal-cust-warp"
  >
    <a-span :spinning="confirmLoading">
      <a-form :form="form">
        <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="角色名称">
          <a-input placeholder="请输入角色名称" v-decorator="['roleName',validatorRules.roleName]"/>
        </a-form-item>
        <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="角色编码">
          <a-input placeholder="请输入角色编码" v-decorator="['roleCode',validatorRules.roleCode]"/>
        </a-form-item>
        <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="角色状态">
          <a-select placeholder="请选择角色状态" v-decorator="['status',validatorRules.status]">
            <a-select-option value="1">启用</a-select-option>
            <a-select-option value="0">禁用</a-select-option>
          </a-select>
        </a-form-item>
        <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="描述">
          <a-input placeholder="请输入角色描述" type="textarea" v-decorator="['description',{}]"/>
        </a-form-item>
      </a-form>
    </a-span>
  </a-modal>
</template>

<script>
import pick from 'lodash.pick'
import {ModalFormMixin} from "@/mixins/ModalFormMixin";

export default {
  name: "RoleModules",
  mixins: [ModalFormMixin],
  data(){
    return {
      validatorRules: {
        roleName: {
          rules: [
            {
              required:true,
              message: '请输入角色名称',
            }
          ]
        },
        roleCode: {
          rules: [
            {
              required:true,
              message: '请输入角色编码',
            }
          ]
        },
        status: {
          rules: [
            {
              required:true,
              message: '请输入角色状态',
            }
          ]
        }
      },
      url: {
        add: '/role/add',
        edit: '/role/edit'
      }
    }
  },

  methods: {

    add() {
      this.form.resetFields();
      this.visible=true;
    },

    edit(record) {
      this.form.resetFields();
      this.model = Object.assign({}, record)
      this.visible = true
      this.$nextTick(() => {
        this.form.setFieldsValue(pick(this.model,'roleName','roleCode','status','description'))
      });
      this.visible=true;
    },

    classifyIntoFormData(params){
      let main = Object.assign(this.model, params);
      return {
        ...main
      }
    },


  }
}
</script>

<style scoped>

</style>
